<template>
  <section class="wrapper">
    <section class="top"></section>
    <section class="list">
      <section class="list-item" v-for="item in list" :key="item.id" @click="$router.push({name: 'Details', params: {id: item.id}})">
        <section class="img" :style="{backgroundImage: `url(${item.mainImg})`}">
          <section class="status" :class="{finish: item.status !== 3}">{{ statusText[item.status] }}</section>
        </section>
        <section class="title">
          {{ item.theme }}
          <section class="tag">{{ item.typeName }}</section>
        </section>
        <section class="time">
          <img src="../assets/images/time.png" alt="">
          {{ item.createTime | replaceT }} - {{ item.endTime | replaceT}}
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import {getMatchList} from '@/api/match'
export default {
  name: 'Message',
  data: () => ({
    // statusText: {
    //   1: '报名审核中',
    //   2: '报名成功'
    // },

    statusText: {
      1: '未开始',
      2: '已完结',
      3: '进行中'
    },
    list: [
      {
        id: 1,
        name: '电子控制工程赛',
        tag: '电子科技',
        picUrl: './images/about-introduce-img1.png',
        status: 1,
        time: '2019/09/23-2020/06/20'
      },
    ]
  }),
  filters: {
    replaceT(val) {
      if (!val) return ''
      return val.split('T')[0]
    }
  },
  created() {
    getMatchList().then(res => {
      console.log(res)
      const date = +new Date()
      this.list = res.records.map(item => {
        const startDate = +new Date(item.createTime)
        const endDate = +new Date(item.endTime)
        if (date < startDate) item.status = 1 //未开始
        else if (date > endDate) item.status = 2 //已结束
        else item.status = 3 //进行中
        return item
      })
    })
  }
}
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top {
    width: 10rem;
    height: 2.267rem;
    background-image: linear-gradient(90deg,
    #2e9cff 0%,
    #1f7eff 100%),
    linear-gradient(
      #000000,
      #000000);
    background-blend-mode: normal,
    normal;
  }

  .list {
    transform: translateY(-1.2rem);
    margin: 0 0.4rem;
		padding-bottom: 1.6rem;

    .list-item {
      padding: 0.267rem;
      margin-bottom: 0.267rem;
      background-color: #ffffff;
      box-shadow: 0rem 0rem 0.2rem 0.04rem rgba(0, 0, 0, 0.02);
      border-radius: 0.133rem;

      .img {
        margin-bottom: 0.133rem;
        position: relative;
        height: 4rem;
        background-color: #5b666d;
        border-radius: 0.133rem;
        -webkit-background-size: cover;
        background-position: center 0;
        background-size: cover;

        .status {
          position: absolute;
          left: -0.173rem;
          top: 0.12rem;
          .flex;
          justify-content: center;
          padding: 0 0.133rem;
          height: 0.533rem;
          font-size: 0.293rem;
          font-weight: bold;
          color: #ffffff;
          border: 2px solid #fff;
          background-image: linear-gradient(250deg,
          #ffbb5b 0%,
          #f78b2e 100%),
          linear-gradient(
            #e5f5ff,
            #e5f5ff);
          color: #ffffff;
          border-radius: 0.267rem;

          &.finish {
            color: #fff;
            background-image: linear-gradient(250deg,
            #007eff 0%,
            #30a4ed 100%),
            linear-gradient(
              #e5f5ff,
              #e5f5ff);
          }
        }
      }

      .title {
        margin-bottom: 0.24rem;
        .flex;
        justify-content: flex-start;
        font-size: 0.373rem;
        font-weight: 500;
        color: #000000;

        .tag {
          .flex;
          margin-left: 0.267rem;
          padding: 0 0.053rem;
          background-color: #e5eaf1;
          border-radius: 0.04rem;
          height: 0.4rem;
          font-size: 0.293rem;
          color: #6b7686;
        }
      }

      .time {
        .flex;
        justify-content: flex-start;
        font-size: 0.32rem;
        color: #666666;

        img {
          margin-right: 0.133rem;
        }
      }
    }
  }
</style>
